@import url('https://fonts.googleapis.com/css2?family=Alegreya+SC&display=swap');
body {
	display: flex;
	background-color: #D5D1C9;
	color: black;
	font-family: 'Alegreya SC', serif;
}
html {
	background: #d5d1c9;
}
.lhs {
	width:62%;
}
.lhs img {
	width:61.5%;
	position: fixed;
	top: 0;
	left: 0;
}
.rhs {
	width: 38%;
	float: right;
	max-height: 650px;
	overflow-y: scroll;
	position: fixed;
	top: 0;
	right: 0;
}
a {
	color: #65625e;
	text-decoration: none;
}
.credits {
	color: #65625e;
		/*text-decoration: none;
		color:  #b676ff;
		font-weight: bold;*/
	/*font-size: .9vw;*/
	position: absolute;
	margin-right:2em;
	text-decoration: none;
}
.credits a:hover {
	/*border-bottom: 2px solid #b676ff;*/
	text-decoration: none;
	color:  #b676ff;
	font-weight: bold;
}
.col1, .col2 {
	width: 50%;
}
.right {
	float: right;
}
.m-l-1 {
	margin-left: 1em;
}
.m-l-3 {
	margin-left: 3em;
}
.title {
	float: right;
	margin-right: 2em;
	margin-bottom: .25em;
	margin-top: .25em;
	width: 100%;
	text-align: right;
	font-size: 1.5em;
	font-weight: bolder;
}
.bold {
	font-weight: bold;
}
.lht2 {
	line-height: 2;
}
.flex-container {
	display: flex;
}
.purple {
	color: #544E61;
}
.large {
	font-size: 2em;
	padding: 5px;
}
.grey {
	color: #65625e;
}
.songju {
	vertical-align: super;
	padding: .25em;
	width: 80%; 
	display: inline-block;
	font-size: 18px;
}
.circle{
	height: 20px;
	width: 20px;
	background-color: #63c9bdff;
	border-radius: 50%;
	display: inline-block;
	margin-left: 2.5em;
	margin-top: 0.35em;
}
.circle2{
	height: 20px;
	width: 20px;
	background-color: #58555a;
	border-radius: 50%;
	display: inline-block;
	margin-left: 2.5em;
}
.p-r-b{
	padding-right: 10em;
}
.block{
	display: block;
}
.right{
	float: right;
}
.right2{
	float: right;
	margin-top: 0.35em;
}

.location-wrapper {
	width:94%;
	margin-bottom: 10em;
}
.location,
.location:visited,
.location:active,
.location:focus {
	background: #F0ECE4;
	padding: 5px  1em;
	margin: 5px;
	list-style-type: none;
	border-radius: 9px;
	color: black;
	width: 94% !important;
}
.location:hover {
	background-color: #8c9dbf;
	color: white;
	text-decoration: none;
}
.location a,
.location a:visited,
.location a:active,
.location a:focus {	
	background: inherit;
	color: inherit;
	text-decoration: none;
}
.location a:hover {
	background-color: inherit;
	color: inherit;
	text-decoration: none;
}
@media only screen and (max-width: 1000px) {
	.flex-container {
		flex-direction: column;
	}
	.lhs, .rhs, .location, .location-wrapper {
		width: 100%;
		display: block;
		overflow-x: hidden;
	}
	.lhs img {
		position: static !important;
		width: 100%;
	}
	.rhs {
		position: static !important;
	}
	.credits{
		position: static;
	}
}